<script lang="ts" module>
    export const ListContextKey = Symbol("ListContextKey");
    export const useListContext = () => getContext<ListContextProps>(ListContextKey);
</script>

<script lang="ts">
    import { getContext, setContext } from "svelte";
    import { useClassList } from "../utils/useClassList";
    import type { ListContextProps, ListProps } from "./List.d";

    const { activeKey = $bindable(""), ...props }: ListProps = $props();

    const classList = $derived(
        useClassList(props, "cm-list", {
            "cm-list-border": props.border,
            "cm-list-selectable": props.selectable,
            [`cm-list-${props.size}`]: props.size,
        })
    );

    setContext(ListContextKey, {
        activeKey: () => activeKey,
        selectable: props.selectable,
        onSelect: props.onselect,
    });
</script>

<div class={classList}>
    {#if props.head}
        <div class="cm-list-head">
            {#if typeof props.head === "function"}
                {@render props.head()}
            {:else}
                {props.head}
            {/if}
        </div>
    {/if}
    {@render props.children?.()}
    {#if props.foot}
        <div class="cm-list-foot">
            {#if typeof props.foot === "function"}
                {@render props.foot()}
            {:else}
                {props.foot}
            {/if}
        </div>
    {/if}
</div>
